<template>
  <div class="chemical-industry">
    <Header />
    <div class="chemical-industry-body">
      <div class="chemical-industry-top">
        <div style="display: flex; justify-content: space-between">
          <div class="chemical-industry-Aprogress">
            <p class="UnidreamLEDStyle">
              <span style="font-size: 70px; margin-right: 30px">{{ rjcjJd || 0 }}</span>
              <span style="font-size: 70px; margin-right: 30px">/</span>
              <span style="font-size: 40px">24&nbsp;&nbsp;h</span>
            </p>
            <p style="font-size: 30px">日均采集进度</p>
          </div>
          <div style="padding: 0 100px; box-sizing: border-box">
            <div style="display: flex; justify-content: space-between" class="centerbox">
              <div class="progress-left" style="color: #666666">
                <el-progress type="circle" :percentage="ywcSl" color="#74B115">
                  <template #default="{ percentage }">
                    <p
                      style="
                        color: #99cc00;
                        line-height: 24px;
                        font-size: 29px;
                        height: 23px;
                        padding-bottom: 10px;
                      "
                    >
                      <!-- 有问题 -->
                      {{ ywcSl }}
                    </p>
                    <p style="color: #ffffff" class="success">已完成</p>
                  </template>
                </el-progress>
              </div>
              <div style="width: 540px; margin-top: -10px" class="center-box">
                <div class="c-box-center">
                  <p style="padding-bottom: 10px">{{ cjqySl }}</p>
                  <p
                    style="
                      height: 25px;
                      font-size: 24px;
                      font-weight: 400;
                      color: #ffffff;
                      line-height: 30px;
                    "
                  >
                    总和
                  </p>
                </div>
              </div>
              <div class="progress-right">
                <el-progress type="circle" :percentage="wwcSl" color="#CC0000">
                  <template #default="{ percentage }">
                    <p
                      style="
                        color: #cc0000;
                        line-height: 24px;
                        font-size: 29px;
                        height: 23px;
                        padding-bottom: 10px;
                      "
                    >
                      <!-- 有问题 -->
                      {{ wwcSl }}
                    </p>
                    <p style="color: #ffffff" class="hangInTheAir">未完成</p>
                  </template>
                </el-progress>
              </div>
            </div>
          </div>

          <div class="chemical-industry-Aprogress">
            <p class="UnidreamLEDStyle">
              <span style="text-align: center; font-size: 70px">{{ dtcjSl }}</span>
            </p>
            <p style="font-size: 30px">当天采集数量</p>
          </div>
        </div>
      </div>
      <div class="table-box">
        <el-form :model="form">
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="园区名称">
              <el-select v-model="form.yqmc" clearable>
                <el-option
                  v-for="item in yqmcoptions"
                  :key="item.value"
                  :label="item.text"
                  :value="item.text"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="企业名称">
              <el-input v-model="form.qymc" />
            </el-form-item>

            <el-form-item label="企业类型">
              <el-select v-model="form.qylx" clearable>
                <el-option
                  v-for="item in qylxoptions"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="所属市">
              <el-select v-model="form.sss" clearable @change="selectHandle">
                <el-option
                  v-for="item in sOptions"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="所属区县">
              <el-select v-model="form.xq" clearable>
                <el-option
                  v-for="item in qxOptions"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="form.cjzt" clearable>
                <el-option
                  v-for="item in cjztoptions"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                />
              </el-select>
            </el-form-item>

            <el-button @click="searchClick">搜索</el-button>
          </div>
        </el-form>

        <el-table
          :data="tableData"
          style="width: 100%; color: #fff"
          height="calc(100% - 28rem)"
          header-row-style="font-size:20px"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          >>
          <el-table-column type="index" label="序号" width="70" />
          <el-table-column prop="yqmc" label="园区名称" width="240" />
          <el-table-column prop="qymc" label="企业名称" width="240" :show-overflow-tooltip="true" />
          <el-table-column prop="qylxMc" label="企业类型" />
          <el-table-column prop="cylxMc" label="产业类型" />
          <el-table-column prop="sss" label="所属市" />
          <el-table-column prop="xq" label="所属区县" />
          <el-table-column prop="cjjgMc" label="所属支队" width="240" />
          <el-table-column prop="ywmx" label="有无模型" width="120">
            <template #default="scope">
              <span>{{ scope.row.ywmx == 0 ? '无' : '有' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zt" label="状态" width="120">
            <template #default="scope">
              <span v-if="scope.row.cjztMc == '进行中'" style="color: #ff9900">进行中</span>
              <span v-if="scope.row.cjztMc == '未开始'" style="color: #00ff66">未开始</span>
              <span v-if="scope.row.cjztMc == '已完成'">已完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="100">
            <template #default="scope">
              <div style="display: flex; justify-content: center">
                <div
                  style="width: 24px; height: 24px; cursor: pointer"
                  @click="jumpPage(scope.row)"
                >
                  <img
                    style="width: 100%; height: 100%"
                    src="/src/assets/image/common/edit-icon.png"
                    alt=""
                  />
                </div>
                <!-- <el-icon style="margin-left: 10px">
                  <View />
                </el-icon> -->
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 有问题 -->
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-pagination
            v-model:currentPage="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 50, 100]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog v-model="isShowHomeYwmx" title="Tips" width="580px" :before-close="handleCloseywmx">
      <div style="font-size: 40px; text-align: center; padding-top: 30px; color: #fff">
        <el-icon>
          <InfoFilled />
        </el-icon>
        该企业暂无模型,请选择有模型的企业。
      </div>
      <div style="height: 30px"></div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { queryQyxxInfoPage, queryHomeList, queryZdZdmcInfo, querysqx } from '@/service/api'
import { useRouter } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'
import { User, HomeFilled, DocumentCopy, View, Food } from '@element-plus/icons-vue'
import { json } from 'stream/consumers'
import Header from '@/components/Header/index.vue'
import { ElLoading } from 'element-plus'
const loginStore = useLoginInfoStore()
const chemicalStore = useChemicalStore()

const title = computed(() => window.app.config.globalProperties.$config.title)
const nowTime: any = ref('')
const dat = ref(new Date())
//分别获取自己需要的东西，时分秒，年月日等，这里只有时分秒
const getHours = ref(dat.value.getHours())
const getMinutes = ref(dat.value.getMinutes())
const getSeconds = ref(dat.value.getSeconds())
const data = ref<any>('')
const week = ref<any>('')
const currentPage4 = ref(1)
const pageSize4 = ref(20)
const total = ref(0)
const small = ref(false)
const rjcjJd = ref('')
const dtcjSl = ref('')
const cjqySl = ref('')
const wwcSl = ref()
const ywcSl = ref()
const background = ref(false)
const disabled = ref(false)
const $router = useRouter()
const dialogVisible = ref<boolean>(false)
const tableData = ref([])
const form = ref({
  yqmc: '',
  qymc: '',
  qylx: '',
  sss: '',
  xq: '',
  cjzt: '',
})
const qylxoptions = ref()
const yqmcoptions = ref()
const cjztoptions = ref()
const sOptions = ref()
const qxOptions = ref()
const isShowHomeYwmx = ref(false)
const handleCloseywmx = (done: () => void) => {
  isShowHomeYwmx.value = false
}
function getqueryYqxxZdInfo() {
  const params = {
    jgId: loginStore.jgId,
    // jgId:sjszjgTywysbm.sjszjgTywysbm
  }
  queryYqxxZdInfo(params).then((res: any) => {
    yqmcoptions.value = res
  })
}
function getqylxList() {
  const params = {
    key: 'qylx',
  }
  queryZdZdmcInfo(params).then((res: any) => {
    qylxoptions.value = res
  })
}
function getcjztList() {
  const params = {
    key: 'cjzt',
  }
  queryZdZdmcInfo(params).then((res: any) => {
    cjztoptions.value = res
  })
}
const handleSizeChange = (val: number) => {
  pageSize4.value = val
  queryQyxxInfoPageList()
}
const handleCurrentChange = (val: number) => {
  currentPage4.value = val
  queryQyxxInfoPageList()
}
const timer = ref()
function eschandler() {
  dialogVisible.value = true
}
function jumpPage(row: object) {
  if (row.ywmx == 0) {
    isShowHomeYwmx.value = true
  } else if (row.ywmx == 1) {
    //保存企业信息
    chemicalStore.qyInfo = row
    localStorage.setItem('qyInfo', JSON.stringify(row))
    $router.push({ path: '/collection' })
  }
}
function showTime() {
  // 动态展示现在时间
  const date = new Date()
  const year = date.getFullYear()
  let month: any = date.getMonth() + 1
  month = month < 10 ? '0' + month : month
  let day: any = date.getDate()
  day = day < 10 ? '0' + day : day
  week.value = '日一二三四五六'.charAt(date.getDay()) // 使用charAt函数提取相应汉字
  data.value = year + '年' + month + '月' + day + '日'
  timer.value = setInterval(() => {
    //秒
    if (getSeconds.value == 59) {
      getSeconds.value = 0
      //分
      if (getMinutes.value == 59) {
        getMinutes.value = 0
        //时
        if (getHours.value == 23) {
          getHours.value = 0
        } else {
          getHours.value += 1
        }
      } else {
        getMinutes.value += 1
      }
    } else {
      getSeconds.value += 1
    }
  }, 1000)
}
function queryQyxxInfoPageList() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  const params = {
    pageNo: currentPage4.value,
    pageSize: pageSize4.value,
    jgId: loginStore.jgId,
    ...form.value,
  }
  queryQyxxInfoPage(params)
    .then((res: any) => {
      tableData.value = res.records
      total.value = res.total
      loading.close()
    })
    .catch(() => {
      loading.close()
    })
}
function searchClick() {
  queryQyxxInfoPageList()
}
function queryHomeData() {
  const params = {
    jgId: loginStore.jgId,
    // jgId:sjszjgTywysbm.sjszjgTywysbm
  }
  queryHomeList(params).then((res: any) => {
    rjcjJd.value = res.rjcjJd
    dtcjSl.value = res.dtcjSl
    cjqySl.value = res.cjqySl
    wwcSl.value = res.wwcSl
    ywcSl.value = res.ywcSl
  })
}
function queryHomeSList() {
  const params = {
    jgId: loginStore.jgId,
    // jgId:sjszjgTywysbm.sjszjgTywysbm
  }
  querysqx(params).then((res: any) => {
    sOptions.value = res.sssList
  })
}
function selectHandle(val: any) {
  queryHomeqxList(val)
}
function queryHomeqxList(val: any) {
  const params = {
    jgId: loginStore.jgId,
    sss: val,
  }
  querysqx(params).then((res: any) => {
    qxOptions.value = res.xqList
  })
}

watch(
  () => form.value.sss,
  (newVal, oldVal) => {
    form.value.xq = ''
  }
)
// onActivated(()=>{
//  console.log(timer.value)
// })

onMounted(() => {
  // showTime()
  queryQyxxInfoPageList()
  queryHomeData()
  getqylxList()
  getcjztList()
  queryHomeSList()
  getqueryYqxxZdInfo()
})
onUnmounted(() => {
  clearTimeout(timer.value)
})
// onDeactivated(()=>{
//   clearTimeout(timer.value)
//   // console.log('离开了')
// })
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'UnidreamLED';
  src: url(../../components/UnidreamLED/UnidreamLED.eot);
  src: url(../../components/UnidreamLED/UnidreamLED.eot?#iefix) format('embedded-opentype'),
    url('../../components/UnidreamLED/UnidreamLED.woff') format('woff'), local('UnidreamLED'),
    url('../../components/UnidreamLED/UnidreamLED.woff');
}

.UnidreamLEDStyle {
  font-family: 'UnidreamLED';
}

/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}

/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.chemical-industry {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: #374147;

  /deep/ .el-pagination button:disabled {
    background: #1d2326;
    color: #fff;
  }

  /deep/ .el-pager li {
    background: #1d2326;
    color: #fff;
  }

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background: #1d2326;
  }

  // ::v-deep .el-table tr {
  //   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  // }

  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background: #1d2326;
    /* color: #f19944; */
    /* 设置文字颜色，可以选择不设置 */
  }

  .centerbox {
    // position: relative;
    display: flex;
    justify-content: space-between;

    // .imagebox {
    //   position: absolute;
    //   top: -9%;
    //   left: 16.5%;
    //   width: 67%;
    //   height: 116%;

    //   img {
    //     width: 100%;
    //     height: 100%;
    //   }
    // }
    .center-box {
      background-image: url('@/assets/image/login/home-header.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .c-box-center {
      width: 170px;
      height: 170px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      text-align: center;
      margin: 8px auto;
      margin-top: 8px;
      margin-right: auto;
      margin-bottom: 8px;
      margin-left: auto;
      /* line-height: 44px; */
      color: #fff;
      padding-top: 53px;
      font-size: 36px;
      box-sizing: border-box;
    }
  }

  /deep/.el-input__wrapper {
    border: 1px solid rgba(121, 121, 121, 1);
    box-shadow: unset;
    background-color: unset;
  }

  /deep/ .el-table__body-wrapper {
    background: #1d2326;
  }

  /deep/ .el-button {
    background: #02979b;
    color: #fff;
    border: 1px solid #02979b;
  }

  .chemical-industry[data-v-5954443c] .el-table th {
    color: #fff !important;
  }

  /deep/ .el-button:focus,
  .el-button:hover {
    background: #02979b;
    color: #fff;
  }

  /deep/ .el-form-item__label {
    color: #fff;
    font-size: 16px;
  }

  .chemical-industry-body {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;

    /deep/ .el-col-14 {
      max-width: 56%;
      flex: 0 0 58.3333333333%;
    }

    .chemical-industry-top {
      width: 100%;
      height: 190px;
      margin-top: 10px;
      padding: 20px 10px;
      box-sizing: border-box;

      .chemical-industry-Aprogress {
        width: 420px;
        height: 170px;
        border-radius: 5px;
        padding: 20px 40px;
        font-family: Digiface;
        text-align: center;
        box-sizing: border-box;
        color: #fff;
        background: linear-gradient(0deg, #2e2f34, #9fa3a9);
      }

      /deep/ .el-progress--circle .el-progress__text {
        color: #fff;
      }

      .progress-left {
        width: 130px;
        height: 130px;
        margin-top: 28px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);

        .success {
          margin-top: 10px;
        }
      }

      .progress-left /deep/ .el-progress-circle {
        width: 130px !important;
        height: 130px !important;
      }

      .progress-right {
        width: 130px;
        height: 130px;
        margin-top: 28px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);

        .hangInTheAir {
          margin-top: 10px;
        }
      }

      .progress-right /deep/ .el-progress-circle {
        width: 130px !important;
        height: 130px !important;
      }
    }

    /deep/ .el-pagination__total,
    /deep/ .el-pagination__jump,
    /deep/ .el-input__inner {
      color: #fff;
    }

    .table-box {
      width: 100%;
      height: 100%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      margin-top: 43px;
      background: #1d2326;

      .el-table--fit {
        border-radius: 10px;
      }
    }
  }

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background: #1d2326;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  /deep/ .el-dialog {
    background-color: rgba(51, 51, 51, 0.898039215686275);
  }

  /deep/ .el-progress-circle__track {
    background-color: #fff;
  }

  //!有问题
  /deep/ .el-table__inner-wrapper {
    height: calc(100% - 0rem) !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  /deep/ .el-table__inner-wrapper::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  /deep/ .el-dialog__body {
    font-size: 22px;
    text-align: center;
  }

  /deep/ .el-table .cell {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /deep/ .el-pager + button.btn-next[type='button'] {
    background: #1d2326;
    color: #fff;
    margin-right: 0;
  }

  /deep/ .el-button {
    background: #02979b;
    color: #fff;
    border: 1px solid #02979b;
    width: 80px;
    height: 30px;

    border-radius: 10px;
  }

  /deep/ .el-dialog__header {
    padding: 0;
  }
}

/deep/ .el-form-item__content {
  max-width: 200px;
}

/deep/ .el-pager li.is-active {
  background: #02979b !important;
  border-radius: 4px;
}

/deep/ .btn-prev {
  background: #1d2326;
  color: #fff;
}
</style>
